
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./three.js"></script>
        <script src="./OrbitControls.js"></script>
        <script src="./stats.min.js"></script>


        <script>

        let scene,camera,renderer
        let controls,stats
        let line
        let n1 = [],n2 = [],n3 = []

        let group1 = new THREE.Group()
        let group2 = new THREE.Group()


        init()

        animate()

        function init(){
            // <!-- 开始建立cube模型 -->
            // 创建场景
            scene = new THREE.Scene()
            scene.background = new THREE.Color( '#B2C2D6' );

            function makeNeuron(x,y,z,width,height,color,list){
                let geo = new THREE.SphereGeometry(4,30,30)

                let met = new THREE.MeshLambertMaterial({color:`${color}`})

                let group1 = new THREE.Group()
                let group2 = new THREE.Group()
                let group3 = new THREE.Group()



                //创建neuron阵列
                for(let i = 0;i<width;i++){
                    let neuron = new THREE.Mesh(geo,met)
                    neuron.position.set(x,y,z)
                    neuron.translateZ(i*15)
                    // console.log(neuron.position);
                    scene.add(neuron)
                    group1.add(neuron)
                }

                for(let i = 0;i<height;i++){
                    let newGroup = group1.clone()
                    newGroup.translateY(i*15)
                    newGroup.children.forEach(d=>{
                        let a = new THREE.Vector3(d.position.x,d.position.y+newGroup.position.y,d.position.z)
                        list.push(a)
                    })
                    scene.add(newGroup)
                }

                // console.log(n1);


                return list
            }

            //渲染三层神经网络结构
            let matrix1 = makeNeuron(-120,-50,-70,10,10,'#032859',n1)
            let matrix2 = makeNeuron(0,-50,-50,8,8,'#7ABAF2',n2)
            let matrix3 = makeNeuron(120,-30,-30,5,5,'#113AA6',n3)


            //创建材质
            var material = new THREE.LineBasicMaterial( { color: '#A80000', linewidth: 0} )

            //向场景中插入模型
            scene.add(line)


            //插入线条
            for(let i = 0;i< 60;i++){

                var geometry = new THREE.Geometry();
                geometry.vertices.push(matrix1[Math.floor(Math.random()*matrix1.length)] );
                geometry.vertices.push(matrix2[Math.floor(Math.random()*matrix2.length)]);

                //创建模型
                line = new THREE.Line(geometry,material)

                scene.add(line)

            }

            for(let i = 0;i< 80;i++){

                var geometry = new THREE.Geometry();
                geometry.vertices.push(matrix2[Math.floor(Math.random()*matrix2.length)]);
                geometry.vertices.push(matrix3[Math.floor(Math.random()*matrix3.length)] );

                //创建模型
                line = new THREE.Line(geometry,material)

                scene.add(line)

            }

            //创建相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000)
            camera.position.y = 400

            //加入点光源
            const point = new THREE.PointLight(0xffffff,1.2)
            point.position.set(400,200,300)//设置位置
            scene.add(point)

            //加入环境光源
            const ambient = new THREE.AmbientLight(0x444444)
            scene.add(ambient)//环境光不用设置光源位置

            //插入辅助axis
            const axis = new THREE.AxesHelper(250)
            scene.add(axis)

            //插入性能检测
            stats = new Stats();
            document.body.appendChild( stats.dom );

            //创建渲染器
            renderer = new THREE.WebGLRenderer()

            renderer.setPixelRatio( window.devicePixelRatio );//设置设备像素比。通常用于避免HiDPI设备上绘图模糊
            renderer.setSize(window.innerWidth,window.innerHeight)
            renderer.setClearColor(0xf0f0f0)
            document.body.appendChild(renderer.domElement)

			window.addEventListener( 'resize', onWindowResize, false );//屏幕自适应



            //实现鼠标操作
            controls = new THREE.OrbitControls(camera)
            //添加渲染函数
            // controls.update()


    }

        //屏幕自适应函数
        function onWindowResize() {

            let aspect = window.innerWidth / window.innerHeight;

            camera.left   = - 1000 * aspect / 2;
            camera.right  = 1000 * aspect / 2;
            camera.top    = 1000 / 2;
            camera.bottom = - 1000 / 2;

            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );//定时函数
            // controls.update()

            stats.begin();//性能检测模块
            render();
            stats.end();
        }

        function render() {

            let timer = Date.now() * 0.0005

            camera.position.z = Math.cos(timer) * 600
            camera.position.x = Math.sin(timer) * 600

            camera.lookAt(scene.position)
            renderer.render( scene, camera );

        }


        </script>
    </body>
</html>


        </script>
    </body>
</html>
